<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${game.getGid()} + '号游戏'"></title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <h1 class="app-page-title">游戏信息</h1>
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">游戏信息</h3>
                    <div class="section-intro">
                        <img style="max-width: 300px; max-height: 300px" th:src="${script.getFace()}" alt="无法展示">
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="app-card-body">
                            <div class="settings-form">
                                <input style="display: none" id="uid" th:value="${game.getUid()}">
                                <input style="display: none" id="gid" th:value="${game.getGid()}">
                                <div class="mb-3">
                                    <label for="sid" class="form-label">剧本号</label>
                                    <div class="form-control" id="sid" th:text="${script.getSid()}"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="name" class="form-label">剧本名
                                    </label>
                                    <div class="form-control" id="name" th:text="${script.getName()}"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="hid" class="form-label">房间号</label>
                                    <div class="form-control" id="hid" th:text="${house.getHid()}"></div>
                                </div>
                                <div class=" mb-3">
                                    <label class="form-label" for="start">开始时间</label>
                                    <div id="start" class="form-control"
                                         th:text="${#dates.format(game.getStart(), 'yyyy-MM-dd HH:mm:ss')}"></div>
                                </div><!--//form-group-->
                                <div th:if="${end}" class=" mb-3">
                                    <label class="form-label" for="end">结束时间</label>
                                    <div id="end" class="form-control"
                                         th:text="${#dates.format(end, 'yyyy-MM-dd HH:mm:ss')}"></div>
                                </div><!--//form-group-->
                            </div>
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">当前玩家</h3>
                    <div class="section-intro">
                        查看参与游戏的玩家
                    </div>
                    <div class="section-intro"
                         th:text="'人数: ' + ${game.getPeople()} + ' / ' + ${script.getPeople()} +'人'">
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="row g-4 settings-section">
                            <div th:each="player : ${players}" class="col-6 col-md-4 col-xl-3 col-xxl-2">
                                <div class="app-card app-card-doc shadow-sm h-100">
                                    <div class="app-card-thumb-holder p-3">
                                        <div class="app-card-thumb">
                                            <img class="thumb-image thumb-image-custom" th:src="${player.getFace()}"
                                                 alt="">
                                        </div>
                                        <span th:if="${player.getUid() == game.getUid()}"
                                              class="badge bg-danger">房主</span>
                                    </div>
                                    <div class="app-card-body p-3 has-card-actions">
                                        <h4 class="app-doc-title truncate mb-0">
                                            <a th:text="${player.getName()}"></a>
                                        </h4>
                                        <div class="app-doc-meta">
                                            <ul class="list-unstyled mb-0">
                                                <li th:text="'账号: ' + ${player.getAccount()}"></li>
                                            </ul>
                                        </div><!--//app-doc-meta-->
                                    </div><!--//app-card-body-->
                                </div><!--//app-card-->
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-->
                </div>
            </div>
        </div><!--//container-fluid-->
    </div><!--//app-content-->
</div><!--//app-wrapper-->
<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    let response = 0
    setInterval(() => {
        $.ajax({
            url: '/ms/api/game/exist?gid=' + parseInt(document.getElementById('gid').value),
            method: 'get',
            dateType: 'json',
            contentType: 'application/json;charset=utf-8',
            sync: false,
            success: function (result) {
                if (!result['success']) {
                    if (response++ !== 1) return
                    alert('时间到, 游戏结束')
                    location.reload()
                }
            }
        })
    }, 1000)
</script>
</body>
</html>
